public List<Users> UsersInfo(string UserName)
{
return new UsersService().UsersInfo(UserName);
}
public List<Users> UsersInfo(string UserName)
{
string sql = " select * from users ";
sql += " where UserName like '%{0}%'";
sql = string.Format(sql, UserName);
SqlDataReader objReader = SQLHelper.GetReader(sql);
List<Users> list = new List<Users>();
while (objReader.Read())
{
list.Add(new Users()
{
LoginId = objReader["LoginId"].ToString(),
Pwd = objReader["Pwd"].ToString(),
UserName = objReader["UserName"].ToString()
});
}
objReader.Close();
return list;
}
public ActionResult GetList(string UserName)
{
List<Users> UsersList = new UsersManager().UsersInfo(UserName);
JavaScriptSerializer jss = new JavaScriptSerializer();
string stringList = jss.Serialize(UsersList);
return Json(stringList, JsonRequestBehavior.AllowGet);
}
[ActionName("GetAllList")]
public ActionResult GetList()
{
ViewBag.UsersList = new UsersManager().UsersInfo("");
return View("UsersManager");
}
public ActionResult list()
{
return View();
}
GetList(string UserName) 程式主要說明:
public ActionResult GetList(string UserName):這是一個公開的動作方法,可以透過 HTTP 請求來存取。它接受一個名為 UserName 的字串參數。
List UsersList = new UsersManager().UsersInfo(UserName);:
透過 UsersManager 類別的 UsersInfo 方法,取得了一個 Users 型別的清單,
這個清單可能包含符合特定使用者名稱的使用者資訊。
JavaScriptSerializer jss = new JavaScriptSerializer();:JavaScriptSerializer
是用來將物件序列化為 JSON 字串,或將 JSON 字串反序列化為物件的類別。建立了一個 JavaScriptSerializer 的實例。
string stringList = jss.Serialize(UsersList);:
透過 JavaScriptSerializer,我們將 UsersList 清單物件序列化成 JSON 字串。這個 JSON 字串包含了使用者資訊的集合。
return Json(stringList, JsonRequestBehavior.AllowGet);:透過 Json 方法,將 JSON 字串包裝成一個 JsonResult,並回傳給客戶端。
JsonResult 代表包含 JSON 資料的 HTTP 回應。JsonRequestBehavior.AllowGet 表示允許客戶端使用 GET 請求取得 JSON 資料。
UsersController.cs 的 list Views
在 Views 資料夾下 加一個 list.cshtml
關鍵程式碼如下
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#submitQuery").click(function () {
$("#userTable tbody").empty();
var cName = $("#UserName").val();
$.post("/Users/GetList", { "UserName": cName }, function (data, status) {
var list = $.parseJSON(data);
for (var i = 0; i < list.length; i++) {
var row = "<tr>" +
"<td>" + list[i].LoginId + "</td>" +
"<td>" + list[i].UserName + "</td>" +
"</tr>";
$("#userTable tbody").append(row);
}
});
});
});
</script>
<body>
<div id="container">
<div id="querydiv">
<div id="formdiv">
<input type="button" id="submitQuery" value="查詢" />
</div>
</div>
<table id="userTable" class="bordered-table" >
<thead>
<tr>
<td><span class="blue-text">帳號</span></td>
<td><span class="blue-text">姓名</span></td>
</tr>
</thead>
</table>
</div>
</body>
jQuery 程式說明如下
$(function () { ... });:這是一個 jQuery 語法,代表當網頁(HTML 文件)載入完成後,執行其中的程式碼。這確保了在 DOM 元素都載入後再執行 JavaScript,以確保 JavaScript 可以操作 HTML 元素。
$("#submitQuery").click(function () { ... });:這一行代表選取 id 為 "submitQuery" 的 HTML 元素 然後綁定了一個 click 事件處理函式。當該按鈕被點擊時,這個函式會被執行。
$("#userTable tbody").empty();:這一行用於清空 HTML 表格(通常是 )中 元素的內容。這樣可以確保每次重新查詢時,表格中不會保留之前的資料。
var cName = $("#UserName").val();:這一行用於取得 id 為 "UserName" 的輸入框中的值,並存儲在變數 cName 中。
$.post("/Users/GetList", { "UserName": cName }, function (data, status) { ... });:這是一個使用 jQuery 的 AJAX POST 請求。
它向位於 "/Users/GetList"
這個 URL 的伺服器端控制器發送了一個 POST 請求,
並帶有一個 JSON 物件 { "UserName": cName } 作為請求的資料。
當伺服器回應時,會執行後面的函式,其中 data 參數包含伺服器回傳的 JSON 資料,status 參數包含請求的狀態。
var list = $.parseJSON(data);:
這一行用於將 JSON 格式的資料(在 data 中)解析成 JavaScript 物件,並存儲在變數 list 中。
$("#userTable tbody").append(row);:這一行用於將建立的 HTML 行(row 變數)附加到表格的 元素中,以顯示在網頁上。
執行畫面如下
按下查詢後